<!-- src/components/Cart.vue -->
<template>
  <div>
    <h2>购物车</h2>
    <div v-for="item in cartItems" :key="item.id" class="cart-item" :class="{ selected: isSelected(item.id) }">
      <div class="item-details">
        <img :src="item.image" alt="product image" :style="{ width: '100px', height: '100px' }">
        <div class="item-info">
          <p>{{ item.name }}</p>
          <p>价格：{{ item.price }}</p>
        </div>
        <el-button @click="removeFromCart(item.id)">删除</el-button>
      </div>
      <input type="checkbox" :checked="isSelected(item.id)" @change="toggleSelectItem(item.id)" class="select-checkbox">
    </div>

    <h3>总价格：{{ selectedTotalPrice }}</h3>

    <router-link to="/">返回首页</router-link>
  </div>
</template>

<script>
export default {
  computed: {
    cartItems() {
      return this.$store.getters.cartItems;
    },
    selectedTotalPrice() {
      return this.$store.getters.selectedTotalPrice;
    }
  },
  methods: {
    removeFromCart(productId) {
      this.$store.dispatch('removeFromCart', productId);
    },
    toggleSelectItem(productId) {
      this.$store.dispatch('toggleSelectItem', productId);
    },
    isSelected(productId) {
      return this.$store.getters.selectedItems.includes(productId);
    }
  }
}
</script>

<style>
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.item-details {
  display: flex;
  align-items: center;
}

.item-info {
  margin-left: 10px;
}

.select-checkbox {
  margin-left: auto;
  transform: scale(1.5); /* 调整复选框的大小 */
  transform-origin: center; /* 确保缩放是从中心开始的 */
}
</style>
